<template>
  <div id="container">
    <div id="backgroundImg" v-if="backList"/>
    <ActivityList
        ref="activityList"
        :class="{back:backList}"
        @doActivityDetail="doActivityDetail"/>
    <transition name="slide">
      <ActivityDetail
          id="activityDetail"
          ref="activityDetail"
          :activityId="activityId"
          v-if="showDetail"
          @doActivityDetail="doActivityDetail"
          @showList="showList"
          @closeDetail="closeDetail"/>
    </transition>
  </div>
</template>
<script>
import ActivityDetail from "@/views/activity/Index_blogs/BlogDetail";
import ActivityList from "@/views/activity/Index_blogs/BlogList";

export default {
  components: {
    ActivityDetail,
    ActivityList
  },

  data() {
    return {
      activityId: 0,
      showDetail: false,
      backList: false,
    }
  },

  created() {
  },
  methods: {
    doActivityDetail(id) {
      console.log("C", id)
      this.activityId = id;
      if (id !== 0)
        this.backList = true;
      this.showDetail = true;
    },
    showList() {
      this.backList = false;
      this.$refs.activityList.activateList();
    },
    closeDetail() {
      this.showDetail = false;
    }
  }
}
</script>

<style lang="less" scoped>

.slide-enter {
  transform: translateY(100%);
}

.slide-enter-active {
  transition: all 0.5s ease-in-out;
}

.slide-leave-active {
  transform: translateY(100%);
  transition: all 0.5s ease-in-out;
}

.back {
  top: 0;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 4px;
  transition: 1s ease;
}

#backgroundImg {
  border-radius: 1px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.18);
  z-index: 10;
  transition: ease 1s;
}

#activityDetail {
  z-index: 20;
  height: 100%;
  position: fixed;
  top: 0;
  left: 10%;
  width: 80%;
  transition: 0.5s ease;
  bottom: 0;
  overflow: scroll;
}

</style>
